<template>
	<view class="">
		<view class="navBarBox">
			<view class="statusBar" :style="{ height: statustop + 'px' }"></view>
			<view class="navBar"  :style="{ height: statuheight + 'px' }">
				<view class="address"> 
					<text class="icon-dizhi1 iconfont"></text> 
					<picker @change="bindPickerChange"  range-key="name" :range="address">
						{{addresstitle}}
					</picker>
					
					
				</view>
			</view>
			
			<view class="selectbox">
				
				<view class="selectbox_input" @tap="toselect">
					<text class="icon-sousuo iconfont"></text> 请输入内容
				</view>
				
				<view class="selectbox_q" @tap="seehelp">
					<text class="icon-caozuoshouce iconfont"></text>
					<view>操作指南</view>
				</view>
				
			</view>
			
			<view style="height: 30rpx;"></view>
			
		</view>
		
		<view class="bannerbox">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="5000"
							duration="500">
				<swiper-item v-for="img in banner">
						<image @tap="seeinfo" :data-url="img.links" :src="img.image" mode="widthFix"></image>
				</swiper-item>
		
			</swiper>
			
		</view>
		
		<view style="height: 380rpx;"></view>
		
		<view class="menubox">
			
			<view class="menuboxli" @tap="seemenus" :data-id="item.id" v-for="item in menu">
				<image :src="item.image"  mode="aspectFill"></image>
				<view class="menuboxli_tit">{{item.name}}</view>
			</view>
			
		</view>
		
		<view class="goodsbox">
			<view class="goods_title">
				<text class="icon-sousuoremenfenlei iconfont"></text> 热门推荐
			</view>
			
			<view class="goods_show">
				
				<view class="goods_showli" @tap="seegoodsinfo" :data-id="item.id" v-for="item in lists">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="goods_showli_title font1">{{item.name}}</view>
					<view class="goods_showli_desc font2">{{item.desc}}</view>
					<view class="goods_showli_money">
						<view class="goods_showli_money1"> ¥ {{item.money}}</view>
						<view class="goods_showli_money2 font1"> {{item.extensive}} </view>
					</view>
				</view>
				
				
			</view>
			
			
			<view style="height: 20rpx;"></view>

			<view class="goods_title">
				<text class="icon-sousuoremenfenlei iconfont"></text> 热门文章
			</view>
			
			<view class="listbox" @tap="seeinfobyid" :data-id="item.id" v-if="index<4" v-for="item,index in news">
				
				<view class="list_img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				
				<view class="list_right">
					
					<view class="list_right1 font1">{{item.name}}</view>
					<view class="list_right2 font1">
						
						阅读量:{{item.see}} 来源:{{item.from}}
						
					</view>
					<view class="list_right2">
						
						发布时间:{{item.datetime}}
						
					</view>
				</view>
				
			</view>
			
			
			<view style="height: 20rpx;"></view>
		</view>
		
		
	</view>
</template>

<script>
	
	import {curl} from 'common/api.js';
	export default {
		data() {
			return {
				address: [],
				addresstitle:'请选择',
				menu:[],
				statustop:'0',
				statuheight:'32',
				banner:[],
				lists:[],
				news:[]
			}
		},
		onShareAppMessage(res) {
	
		},
		onLoad() {
			var that=this;
			// 抖音或者小程序
			//#ifdef MP-TOUTIAO || MP-WEIXIN
				let res = uni.getMenuButtonBoundingClientRect();
				console.log('手机状态栏高度',res)
				
				var infos = uni.getSystemInfoSync();
				var jiaolang=res.top;
				
				this.statustop=res.top;
				this.statuheight=res.height;
			//#endif
			
			var addresstitle=uni.getStorageSync('addresstitle');
			// console.log('缓存地址',addresstitle);
			if (addresstitle) {
				that.addresstitle=addresstitle;
			}	
			
			this.getaddress();
			this.getbanner();
			this.getmenus();
			this.getindexshowbycity('');
			this.getnews();
			
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
						
						
		},
		methods: {
			onShareTimeline(options) {
				let that = this
				  let data = {
					title:'办桶沟', // 默认是小程序的名称
					path: '/pages/index/index', // 页面路径，默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: res => {
						
					},
					fail: res => {
					
					},
					complete: res => {}
				  }
				  return data
				
			},
				
			seeinfobyid(ret){
				var id=ret.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/article/info?id="+id
				})
			},
			getnews(){
				var that=this;
		
				
				curl('index/getnews', {page:1}).then((res) => {
					console.log('最新消息',res.data);
					var list=res.data;
						that.news=list;
			
					
				});
			},
			
			
			toselect(){
				uni.navigateTo({
					url:'/pages/index/select'
				})
			},
			
			seehelp(){
				uni.navigateTo({
					url:'/pages/index/help'
				})
			},
			seegoodsinfo(ret){
				console.log('调整地址',ret);
				var id=ret.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/index/info?id='+id
				})
			},
		
			
			//分类
			getmenus(){
				var that=this;
				curl('index/getmenus', {}).then((res) => {
					// console.log('获取地址信息',res.data);
					that.menu=res.data
				});
			},
			//幻灯片
			getbanner(){
				var that=this;
				curl('index/getbanner', {}).then((res) => {
					console.log('幻灯片',res.data);
					that.banner=res.data
				});
			},
			
			seeinfo(ret){
				console.log('调整地址',ret);
				var links=ret.currentTarget.dataset.url
				uni.navigateTo({
					url:links
				})
			},
			
			seemenus(ret){
				console.log('分类id',ret);
				var id=ret.currentTarget.dataset.id
				
				
				uni.navigateTo({
					url:'/pages/index/menus?cid='+id
				})
			},
			
			//选择地址
			bindPickerChange(res){
				console.log('选择',res);
				var i=res.detail.value;
				var addrss=this.address;
				
				var addresstitle=addrss[i].name;
				
				uni.setStorageSync('addresstitle',addresstitle);
				this.addresstitle=addresstitle;
				this.getindexshowbycity(addresstitle);
			},
			//获取地址信息
			getaddress(){
				var that=this;
				curl('index/getaddress', {'xx':1}).then((res) => {
					// console.log('获取地址信息',res.data);
					that.address=res.data
				});
			},
			//获取首页推荐
			getindexshowbycity(city){
				
				var that=this;
				curl('index/getindexshowbycity', {'city':city}).then((res) => {
					console.log('首页推荐',res.data);
					that.lists=res.data
				});
				
				
			}
		}
	}
</script>

<style>
	/* 210 */
	.goods_showli_money2{
		width: 130rpx;color: #646464;height: 60rpx;line-height: 50rpx;
		font-weight: 500;font-size: 24rpx;
		text-align: right;
	}
	.goods_showli_money1{
		width: 180rpx;color: #f14a27;height: 60rpx;line-height: 50rpx;
		font-weight: bold;font-size: 28rpx;
	}
	.goods_showli_money{
		width: 320rpx;height:60rpx;margin: auto;
		display: flex;align-items: center;justify-content: space-around;
	}
	.goods_showli_desc{
		width: 320rpx;height:88rpx;margin: auto;
		font-size: 28rpx;font-weight: 500;line-height: 40rpx;
	}
	.goods_showli_title{
		width: 320rpx;height:60rpx;margin: auto;
		font-size: 30rpx;font-weight: bold;line-height: 60rpx;
	}
	.goods_showli>image{
		width: 335rpx;height: 335rpx;
		border-radius: 10rpx 10rpx 0px 0px ;
	}
	
	.goods_showli{
		width: 335rpx;height:550rpx;margin: 10rpx;
		background: #ffffff;border-radius: 10rpx;
	}
	.goods_show{
		width: 710rpx;height: auto;margin: auto;
		display: flex;
		flex-wrap: wrap;
	
	}
	
	.goods_title>text{
		font-size: 32rpx !important;font-weight: bold !important;
		margin-right: 5rpx;
	}
	.goods_title{
		width: 710rpx;height: 90rpx;margin: auto;
		display: flex;align-items: center;
		font-size: 28rpx !important;font-weight: 600 !important;
	}
	.goodsbox{
		width: 100%;height: auto;
		background-color: #b8ffdd;
		background-image: linear-gradient(180deg, #b8ffdd 0%, #c8ffdb 33%, #f4f4f4 66%, #f4f4f4 100%);
	}
	.menuboxli_tit{
		width: 167rpx;height: 67rpx;
		text-align: center;line-height: 47rpx;font-size: 24rpx;font-weight: bold;
	}
	.menuboxli>image{
		width: 90rpx;height: 90rpx;border-radius: 10rpx;
	}
	.menuboxli{
		width:167rpx;height: 147rpx;margin: 5rpx;
		text-align: center;
	}
	
	.menubox{
		width: 710rpx;height: auto;margin:auto;
		display: flex;flex-wrap: wrap;
	}
	swiper-item,swiper-item>image{
		width: 700rpx;height: 350rpx;border-radius: 10rpx;
	}
	.swiper{
		width: 700rpx;height: 350rpx;margin: 30rpx auto;
		
	}
	.bannerbox{
		width: 100%;height: 400rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx ;margin-top: -20rpx;
		background: #ffffff;position: absolute;z-index: 99;
	}
	.selectbox_q>view{
		height: 40rpx;line-height: 50rpx;
		font-size: 24rpx;color: #ffffff;
	}
	.selectbox_q>text{
		font-size: 32rpx;color: #ffffff;display: block;
	}
	.selectbox_q{
		width: 150rpx;margin-left: 40rpx;
		white-space: 90rpx;text-align: center;
	}
	.selectbox_input>text{
		font-size: 28rpx !important;margin-right: 10rpx;
	}
	.selectbox_input{
		height: 70rpx;width: 520rpx;color: #ececec;
		display: flex;align-items: center;text-indent: 20rpx;
		font-size: 28rpx;
		border-radius: 70rpx;background: #08964c;
	}
	.navBar{
		width: 710rpx;margin: auto;
		display: flex;align-items: center;
	}
	
	.address{
		font-size: 28rpx;font-weight: bold;
		color: white;
		display: flex;align-items: center;
	}
	.address>text{
		font-size: 28rpx !important;margin-right: 5rpx;
	}
	.navBarBox{
		width: 100%;height: auto;background: #08b059;
	}
	
	.selectbox{
		width: 700rpx;height: 120rpx;margin: auto;
		display: flex;align-items: center;justify-content: space-around;
	}
	
	
	.list_right2{
		height:37rpx;line-height: 37rpx;
		font-size: 24rpx;color: #747474;
	}
	.list_right1{
		font-size: 28rpx;font-weight: 500;color: #33333;
	}
	.list_right{
		width: 560rpx;margin-left: 20rpx;
		height: 120rpx;
	}
	.list_img>image{
		width: 120rpx;height: 120rpx;border-radius: 10rpx;
	}
	.list_img{
		width: 120rpx;height: 120rpx;margin-left: 25rpx;
	}
	.listbox{
		width: 100%;height: 180rpx;
		border-bottom: 1px solid #ececec;
		display: flex;align-items: center;
	}
	
	
</style>
